<template>
  <div>
    <span ref="get">{{ count }}</span>
    <button @click="btn">+1</button>
  </div>
</template>
<script>

export default {
  data () {
    return {
      count: 10
    }
  },
  methods: {
    btn () {
      this.count++//vue内部为了防止频繁的重排和重回，他会先让所有代码执行完毕，最后把更新的数据异步渲染到真实DOM上，（数据变化——DOM更新是异步的）
      // console.log(this.$refs.get.innerHTML)//会慢一下，因为是异步

      // 局部--等待异步更新DOM后，回调里面函数体执行
      this.$nextTick(() => {
        console.log(this.$refs.get.innerHTML)
      })

    }
  },
  // updated () {
  //   console.log(console.log(this.$refs.get.innerHTML))
  // }
}
</script>